<template>
  <div style="width: 1650px; height:900px;background-color:#FFF;margin:auto;border:1px solid red;" class="box">
    <div class="grid-content bg-purple-dark">
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
       
        <el-form-item label="供应商" size="samll" style="margin-left: 150px;">
          <el-input size="small" v-model="form.supplyName" placeholder="请输入供应商编号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select size="small" v-model="form.state" placeholder="请选择" style="width: 150px;">
            <el-option label="启动" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属行业">
          <el-select size="small" v-model="form.line" placeholder="请选择">
            <el-option label="零售" value="xx"></el-option>
            <el-option label="制造" value="xx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="white-space: nowrap;margin-top: 5px;" size="small" label="进货负责人">
          <el-input v-model="form.linkman" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item :inline="true">
          <el-button size="small" type="primary" @click="Reset()">重置</el-button>
          <el-button size="small" type="success" @click="Getsupply()">查询</el-button>
          <el-button size="small" type="primary" @click="Tall()">高级选项</el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-button size="small" type="success" @click="onSubmit" style="margin-left:-835px;margin-top: 10px;"
            onclick="SupplyAdd()">新增</el-button>
          <el-button size="small" type="primary" @click="SupplyDel">删除</el-button>
          <el-button size="small" type="primary" @click="SupplyCopy">复制</el-button>
          <el-button size="small" type="primary" @click="onSubmit">导出</el-button>
          <el-button size="small" type="primary" @click="onSubmit">导入</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width:82%; margin-left: 15%;">
        <el-table-column fixed type="selection" width="55">
        </el-table-column>

        <el-table-column fixed width="50" prop="id">
          <!-- 自定义表头 -->
          <template slot="header">
            <div class="container">
              <i @click="cz()" class="el-icon-setting" />
            </div>
          </template>
        </el-table-column>
        
        <el-table-column fixed prop="supply_code" label="供应商编码" width="150">
        </el-table-column>
        <el-table-column fixed prop="supply_name" label="供应商" width="150">
        </el-table-column>
        <el-table-column prop="line_type" label="所属行业" width="120">
        </el-table-column>
        <el-table-column prop="supply_type_code" label="供应商分类" width="120">
        </el-table-column>
        <el-table-column prop="link_man" label="联系人" width="120">
        </el-table-column>
        <el-table-column prop="link_tel" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="e_mail" label="电子邮箱" width="120">
        </el-table-column>
        <el-table-column prop="e_mail" label="进货部门" width="120">
        </el-table-column>
        <el-table-column prop="stock_duty_man" label="进货负责人" width="120">
        </el-table-column>
        <el-table-column prop="inbill_state" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="supply_adr" label="供应商地址" width="200">
        </el-table-column>
        <el-table-column prop="supply_adr" label="账户名称" width="120">
        </el-table-column>
        <el-table-column prop="supply_adr" label="纳税人识别号" width="250">
        </el-table-column>
        <el-table-column prop="supply_adr" label="银行账户" width="120">
        </el-table-column>
        <el-table-column prop="supply_adr" label="开户银行" width="120">
        </el-table-column>
        <el-table-column prop="supply_adr" label="开户行地址" width="300">
        </el-table-column>
        <el-table-column prop="supply_adr" label="操作人" width="120">
        </el-table-column>
        <el-table-column prop="supply_adr" label="操作时间" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.dqy"
        :page-sizes="[4, 8, 12, 16, 20]" :page-size="this.mys" layout="total, sizes, prev, pager, next, jumper"
        :total="this.zts">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import $http from '@/http/base.js'
export default {
  data() {
    return {
      form: {
        supplyName: '',
        state: '',
        line: '',
        linkman: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData:[],
      mys:4,
      dqy:1,
      zts:0,
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    SupplyAdd() {
      this.$router.push('SupplyAdd');
    },
    //分页
    FenYeSelect(){
      alert("进来了")
        $http
          .get('api/bs_Supply/SupplyTjSelect?mys='+this.mys+'&dqy='+this.dqy+'&supply_name='+this.form.supplyName+'&inbill_state='+this.form.state
        +'&line_type='+this.form.line+' &stock_duty_man='+this.form.linkman)
        .then(res => {
          this.tableData = res.list
          this.zts = res.zts
          console.log(res)
        })
        .catch(err =>{
          console.log("错误")
          console.log(err)
        })
    },
    handleSizeChange(val){
      this.mys = val
      this.FenYeSelect()
    },
    handleCurrentChange(val){
      this.dqy = val
      this.FenYeSelect();
    },
  },
  mounted(){
    this.FenYeSelect()
  }
}
</script>

<style scoped></style>
